<canvas id="canvas"></canvas>
<script id="vs_s" type="text/plain">
	attribute vec3 po;
	attribute vec3 co;
	attribute vec3 no;
	uniform mat4 pro;
	uniform mat4 rot;
	uniform mat4 mov;

	uniform vec3 li_co;
	uniform vec3 li_di;
	uniform vec3 li_en;

	varying vec3 co_v;
	void main(){
		gl_Position=pro*mov*rot*vec4(po,1.0);
		vec3 no_di=(rot*mov*vec4(no,0.0)).xyz;
		float li_we=max(-dot(li_di,no_di),0.0);
		vec3 li=li_we*li_co;
		co_v=co*li+li_en;
	}
</script>
<script id="fs_s" type="text/plain">
	varying lowp vec3 co_v;
	void main(){
		gl_FragColor=vec4(co_v,1.0);
	}
</script>
<script type="text/javascript">
	var webgl=canvas.getContext("experimental-webgl");
	var program=webgl.createProgram();
	var vs,fs;
	vs=webgl.createShader(webgl.VERTEX_SHADER);
	fs=webgl.createShader(webgl.FRAGMENT_SHADER);
	webgl.shaderSource(vs,vs_s.textContent);
	webgl.shaderSource(fs,fs_s.textContent);
	webgl.compileShader(vs);
	webgl.compileShader(fs);
	webgl.attachShader(program,vs);
	webgl.attachShader(program,fs);
	webgl.linkProgram(program);
	webgl.useProgram(program);

	var po=webgl.getAttribLocation(program,"po");
	webgl.enableVertexAttribArray(po);
	var co=webgl.getAttribLocation(program,"co");
	webgl.enableVertexAttribArray(co);
	var no=webgl.getAttribLocation(program,"no");
	webgl.enableVertexAttribArray(no);

	var data=[-1,-1,1,1,-1,1,1,1,1,-1,1,1,
	-1,-1,-1,1,-1,-1,1,1,-1,-1,1,-1,
	-1,-1,-1,-1,1,-1,-1,1,1,-1,-1,1,
	1,-1,-1,1,1,-1,1,1,1,1,-1,1,
	-1,1,-1,1,1,-1,1,1,1,-1,1,1,
	-1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1];

	data=new Float32Array(data);
	var buf=webgl.createBuffer();
	webgl.bindBuffer(webgl.ARRAY_BUFFER,buf);
	webgl.bufferData(webgl.ARRAY_BUFFER,data,webgl.STATIC_DRAW);
	webgl.vertexAttribPointer(po,3,webgl.FLOAT,false,0,0);
	var tmp=[[1,0,0],[0,1,0],[0,0,1],[1,1,0],[1,0,1],[0,1,1]];
	data=[];
	for(var i=0;i<tmp.length;i++){
		for(var j=0;j<4;j++){
			data.push.apply(data,tmp[i]);
		}
	}
	data=new Float32Array(data);
	buf=webgl.createBuffer();
	webgl.bindBuffer(webgl.ARRAY_BUFFER,buf);
	webgl.bufferData(webgl.ARRAY_BUFFER,data,webgl.STATIC_DRAW);
	webgl.vertexAttribPointer(co,3,webgl.FLOAT,false,0,0);

	tmp=[[0,0,1],[0,0,-1],[-1,0,0],[1,0,0],[0,1,0],[0,-1,0]];
	data=[];
	for(var i=0;i<tmp.length;i++){
		for(var j=0;j<4;j++){
			data.push.apply(data,tmp[i]);
		}
	}
	data=new Float32Array(data);
	buf=webgl.createBuffer();
	webgl.bindBuffer(webgl.ARRAY_BUFFER,buf);
	webgl.bufferData(webgl.ARRAY_BUFFER,data,webgl.STATIC_DRAW);
	webgl.vertexAttribPointer(no,3,webgl.FLOAT,false,0,0);

	var li_co=webgl.getUniformLocation(program,"li_co");
	var li_di=webgl.getUniformLocation(program,"li_di");
	var li_en=webgl.getUniformLocation(program,"li_en");
	webgl.uniform3fv(li_co,[0.8,0.8,0.8]);
	webgl.uniform3fv(li_di,[-1,0,-1]);
	webgl.uniform3fv(li_en,[0.2,0.2,0.2]);


	var pro=webgl.getUniformLocation(program,"pro");
	var rot=webgl.getUniformLocation(program,"rot");
	var mov=webgl.getUniformLocation(program,"mov");
	webgl.uniformMatrix4fv(
		pro,false,(function(a,r,n,f){
			a=1/Math.tan(a*Math.PI/360);
			return [a/r,0,0,0,0,a,0,0,0,0,-(f+n)/(f-n),-1,0,0,-2*f*n/(f-n),0];
		})(45,canvas.width/canvas.height,1,100));
	webgl.uniformMatrix4fv(mov,false,[1,0,0,0,0,1,0,0,0,0,1,0,0,0,-5,1]);
	data=[];
	for(var i=0;i<24;i+=4){
		data.push(i+0,i+1,i+3,i+3,i+2,i+1);
	}
	data=new Uint16Array(data);
	buf=webgl.createBuffer();
	webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER,buf);
	webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER,data,webgl.STATIC_DRAW);
	webgl.enable(webgl.DEPTH_TEST);
	var a=0;
	setInterval(function(){
		a-=0.02;
		var s=Math.sin(a);
		var c=Math.cos(a);
		webgl.uniformMatrix4fv(rot,false,[c*c,-s,s*c,0,s*c,c,s*s,0,-s,0,c,0,0,0,0,1]);
		webgl.drawElements(webgl.TRIANGLES,36,webgl.UNSIGNED_SHORT,0);
	},16);

</script>